<!--
 * @Author: wangming
 * @Date: 2020-09-07 10:05:33
 * @LastEditors: wangming
 * @LastEditTime: 2022-04-29 13:45:14
 * @Description: pc 表单设计 容器
-->
<template>
  <div class="hmax sz ks-row">
    <div
      class="w60"
      :class="{ w380: showMenu }"
      v-show="getTemplateDate.modalType !== 'business'"
    >
      <div class="w60 rel leftmenu hmax">
        <div class="abs wmax hmax bgwh leftmenu-nav toolbox sz">
          <div v-for="(i, index) in menuList" :key="index">
            <div @click="showMenu = i.tagName">
              <MindmapList
                v-if="i.tagName === 'syllabus'"
                size="20"
                fill="#409EFF"
              />
              <FigmaComponent
                v-if="i.tagName === 'leftModel'"
                size="20"
                fill="#409EFF"
              />
              <IconPark
                v-if="i.tagName === 'historyText'"
                size="20"
                fill="#409EFF"
                type="history"
              />
              <IconPark
                v-if="i.tagName === 'composerList'"
                size="20"
                fill="#409EFF"
                type="block-four"
                class="rotate180 db"
              />
              <i
                v-if="i.tagName === 'Template'"
                :class="i.icon"
                :style="{ color: '#409EFF', 'font-size': '20px' }"
              ></i>
              <div class="icon-label">{{ i.label }}</div>
            </div>
          </div>
          <div @click="setCode">
            <Instruction size="20" fill="#409EFF" />
            <div>代码</div>
          </div>
        </div>
        <div
          class="drawer abs bgwh sz"
          :class="{ l60: showMenu === i.tagName }"
          v-for="(i, index) in menuList"
          :key="index"
        >
          <div class="ks-row-middle-between pl15 pr15 drawer-title sz">
            <span>{{ i.label }}</span>
            <span
              class="el-icon-close g9 f20 poi"
              @click="showMenu = ''"
            ></span>
          </div>
          <div class="pl15" v-if="i.tagName === showMenu">
            <component
              :taglist="taglist"
              :composerList="getFormData.composer"
              :is="i.tagName"
            ></component>
          </div>
        </div>
      </div>
    </div>
    <div class="ks-col ovh temBox">
      <slot name="context"></slot>
    </div>
    <div class="flexcell">
      <div class="hmax rel">
        <div class="nav tc g6 bgwh abs">组件配置</div>
        <div class="pt60 ovya hmax sz">
          <rightModel v-slot="{ form }">
            <slot name="rightModel" v-bind:form="form"></slot>
          </rightModel>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import rightModel from "./rightModel/index.vue";
import leftModel from "./leftModel/index.vue";
import syllabus from "./syllabus/index.vue";
import Template from "./syllabus/Template.vue";
import historyText from "./historyText/index.vue";
import composerList from "./composerList/index.vue";
import { mapGetters } from "vuex";
import {
  Instruction,
  FigmaComponent,
  MindmapList,
  CloseSmall,
} from "@icon-park/vue";
import { IconPark } from "@icon-park/vue/es/all";
export default {
  components: {
    leftModel,
    syllabus,
    rightModel,
    Template,
    historyText,
    composerList,
    Instruction,
    FigmaComponent,
    MindmapList,
    CloseSmall,
    IconPark,
  },
  computed: {
    ...mapGetters(["getFormData", "getTemplateDate"]),
  },
  props: {
    taglist: {
      type: Array,
      default: () => [],
    },
    menuList: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    setCode() {
      this.$monacoEditor.showEdit("javascript", this.getFormData);
    },
    // 展示逻辑编排数据
    setComposer() {
      console.log("this.getFormData", this.getFormData.composer);
    },
  },
  data() {
    return {
      showMenu: "",
    };
  },
};
</script>

<style lang="scss" scoped>
.w380 {
  width: 350px;
}
.wmax {
  width: 100%;
}
.hmax {
  height: 100%;
}
.flexcell {
  width: 345px;
  border-left: 1px solid #f1f1f1;
}

.p24 {
  box-sizing: border-box;
  padding: 24px;
}
.leftmenu {
  .drawer {
    overflow-y: auto;
    width: 290px;
    height: 100%;
    top: 0;
    left: -280px;
    z-index: 10;
    box-shadow: 0 0 5px 5px #f1f1f1;
    transition: left 0.3s;
    &-title {
      background-color: #f5f6f7;
      height: 40px;
    }
  }
  .l60 {
    left: 60px !important;
  }
  &-nav {
    border-right: 1px solid #f1f1f1;
    z-index: 20;
  }
}
.toolbox {
  text-align: center;
  padding-top: 20px;
  font-size: 12px;
  cursor: pointer;
  > div {
    margin-bottom: 20px;
    color: #409eff;

    > div {
      margin-top: 3px;
    }
  }
  .icon-label {
    margin-top: 3px;
  }
}
.nav {
  top: 0;
  width: 100%;
  height: 56px;
  line-height: 56px;
  border-bottom: 1px solid #f1f1f1;
  z-index: 999;
  background-color: #f5f7fa;
  color: #333;
}
.temBox {
  display: flex;
  flex-direction: column;
}
</style>
